:host {
	display:flex;
	position:relative;
	box-sizing:border-box;
	min-width:60px;
	min-height:24px;
	border:1px solid #666;
	cursor:default;
	background:#232323
}
.mask,.rgb-wrapper {
	background-image:url(img/transparent-bg.png)
}
:host[no-alpha] #alpha {
	display:none
}
:host[no-alpha] .rgb-wrapper {
	height:20px
}
:host[no-alpha] #previewRGB {
	height:20px
}
:host[no-alpha] #iconDown {
	bottom:5px
}
.border {
	position:relative;
	border:1px solid #000;
	width:100%
}
.rgb-wrapper {
	position:relative;
	height:17px
}
#iconDown {
	font-size:10px;
	position:absolute;
	right:5px;
	bottom:2px;
	color:#000
}
#previewRGB {
	height:17px;
	cursor:pointer
}
#alpha {
	width:100%;
	height:3px;
	background-color:#fff
}
:host[focused] {
	border:1px solid #0c70a6
}
:host[disabled] {
	opacity:.5;
	pointer-events:none
}
.mask {
	display:none;
	opacity:.5
}
:host[disabled] .mask {
	display:flex
}